<template>
  <div class="editorBox">
    <ckeditor
      :editor="editor"
      v-model="editorData"
      :config="editorConfig"
      @ready="onReady"
      @input="onEditorChange"
      :disabled="disabled"
    ></ckeditor>
  </div>
</template>

<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
//import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
//import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
//import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight'; 
import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
import api from "@/api/apiPath";
import Util from "@/common/utils";
import * as qiniu from "qiniu-js";
import MyUploadAdapter from "./upload";


export default {
  data() {
    return {
      editor: ClassicEditor,
    
      ckeditor: "",
      editorData: "",
      editorConfig: {
        //removePlugins: ["MediaEmbed"], //除去视频按钮
        language: "zh-cn", //中文包
        ckfinder: {
          uploaded: 1,
          url: "/"
          // 后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
        },
        image: {
          toolbar: [
            "imageTextAlternative",
            "|",
            "imageStyle:alignLeft",
            "imageStyle:full",
            "imageStyle:alignRight",
            
          ],
          styles: [
            "full",
            "alignLeft",
            "alignRight"
          ]
        },
        // fontSize: {
        //   options: ["tiny", "small", "big", "huge"]
        // },
        // fontFamily: {
        //     options: [
        //         'default',
        //         'Ubuntu, Arial, sans-serif',
        //         'Ubuntu Mono, Courier New, Courier, monospace'
        //     ]
        // },
        toolbar: [
          "heading", //段落
          "|", //分隔
          "bold", //加粗
          "italic", //倾斜
          "link", //超链接
          "bulletedList", //项目列表
          "numberedList", //编号列表
          "blockQuote", //块引用
          "undo", //撤销
          "redo", //重做
          "imageStyle:full", //图片通栏显示
          "imageTextAlternative", //更换图片替换文本
          "imageUpload", //插入图像
          "insertTable", //表格
          "MediaEmbed"
        ] //工具栏显示
      }
    };
  },
  props: ["value", "disabled"],
  watch: {
    value(val) {
      this.editorData = val;
    }
  },
  created() {},
  methods: {
    onEditorChange({ editor, html, text }) {
      this.$emit("input", this.editorData);
    },
    onReady(editor) {
      // 自定义上传图片插件

      let _this = this;
      //加载了适配器
      editor.plugins.get("FileRepository").createUploadAdapter = loader => {
        return new MyUploadAdapter(loader);
      };
      this.ckeditor = editor;
    }
  }
};
</script>
<style >
.editorBox .ck-editor__editable {
  min-height: 200px;
}
</style>